<template>
  <uni-nav-bar title="团成员资格列表" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package">
    <input class="uni-input" confirm-type="search" placeholder="搜索手机号/姓名" @confirm="confirm" v-model="search"
      @input="interrogate" />
  </view>
  <view class="package">{{TeamInfo.teamAll.name}}</view>
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
    :style="{ height: pageHeight + 'px' }">
    <FriendList :frinedList="orderLists" :show="true" @del="del"></FriendList>
  </scroll-view>
  <view class="add" @click="addSubmit()">新增</view>
  <!-- 填写司机信息 -->
  <AddTeam @submit="submit" ref="addteam"></AddTeam>
</template>

<script setup lang="ts">
  import { navBack } from '@/utils/navigator';
  import { showLoading, errorToast, successToast } from '@/utils/prompt';
  import AddTeam from '@c/administrator/BulletBox/addTeam.vue';
  import { ref } from 'vue';
  import FriendList from '@c/administrator/List/friendList.vue';
  import { toPublish } from '@mqtt';
  import { getTeamSupDriver } from '@/gql/administrator';
  import { information } from '@/stores/administrator';
  const TeamInfo = information();
  /**
   * @component
   * @desc 团成员资格列表
   * @property {String} search 搜索信息
   * @property {Boolean} inquireAbout 搜索状态
   * @property {Number} pageHeight 页面高度
   * @property {Array} orderLists 搜索用户列表
   * @property {Number} lastPage 总页数
   * @property {Number} currentPage 当前页数
   * @property {Null} addteam 填写司机信息弹框
   */
  const lastPage = ref(1);
  const currentPage = ref(1);
  const orderLists = ref([]);
  const search = ref('')
  const inquireAbout = ref(false)
  const addteam = ref(null)
  const pageHeight = ref();
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = res.windowHeight - 235;
    },
  });
  init()
  /**
   * 获取团成员列表
   * @property {Number} page 当前页数
   * @property {Number} team_id 当前团ID
   * @property {String} keywords 搜索信息
   */
  function init() {
    showLoading()
    const payload = {
      query: getTeamSupDriver,
      variables: {
        page: currentPage.value,
        team_id: Number(TeamInfo.teamAll.id),
        keywords: search.value
      },
    };
    toPublish(
      'ql/control/getTeamSupDriver',
      payload,
      (obj : any) => {
        const { getTeamSupDriver } = obj.data;
        orderLists.value = [...orderLists.value, ...getTeamSupDriver.list];
        lastPage.value = getTeamSupDriver.lastpage;
      }
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      init();
    }
  }
  function addSubmit() {
    addteam.value.openBankPad()
  }
  /**
   * 新增团成员
   * @property {String} name 成员姓名
   * @property {Number} team_id 当前团ID
   * @property {String} mobile 手机号码
   */
  function submit(num : object) {
    showLoading('正在提交');
    const payload = {
      team_id: TeamInfo.teamAll.id,
      name: num.name,
      mobile: num.phone,
    };
    toPublish('control/addTeamSupDriver', payload, (obj : any) => {
      uni.hideLoading();
      const { code, msg } = obj;
      if (code === 1) {
        successToast(msg)
        currentPage.value = 1
        orderLists.value = []
        init()
      } else {
        errorToast(msg)
      }
    });
  }
  /**
   * 搜索内容
   */
  function interrogate(evt : any) {
    const { detail } = evt;
    if (!detail.value && inquireAbout) {
      console.log(detail.value)
      currentPage.value = 1
      orderLists.value = []
      init()
    }
  }
  function confirm() {
    if (search.value) {
      inquireAbout.value = search.value ? true : false;
      currentPage.value = 1
      orderLists.value = []
      init()
    } else {
      errorToast('请输入您要搜索的内容')
    }
  }
  function del(num : number,driverId:number) {
   showLoading('');
   const payload = {
     id: num,
   };
   toPublish('control/delTeamSupDriver', payload, (obj : any) => {
     uni.hideLoading();
     const { code, msg } = obj;
     if (code === 1) {
       successToast(msg)
       orderLists.value = orderLists.value.filter((item) => item.id == num ? item = null : item)
     } else {
       errorToast(msg)
     }
   });
  }
</script>

<style scoped lang="less">
  .top {
    margin-top: 15rpx;
  }

  .drive:nth-of-type(1) {
    margin-top: 0px !important;
  }

  .add {
    width: 480rpx;
    height: 100rpx;
    background: linear-gradient(-10deg, #2C96F9, #1B91FF);
    border-radius: 5px;
    text-align: center;
    line-height: 100rpx;
    color: #fff;
    margin: 20rpx auto;
    font-size: 32rpx;
  }

  .center {
    image {
      width: 97rpx;
      height: 97rpx;
      background: #DADADA;
      border-radius: 5px;
      margin-right: 20rpx;
    }
  }
</style>